---
title: 색 구성표
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## 색상 구성표 카드

다양한 색상 구성표를 나타내며, 밝은 테마와 어두운 테마를 위해 특별히 설계되었습니다.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| 프로퍼티  | 유형                                      | 설명                                                                                  | 기본값 |
| ----- | --------------------------------------- | ----------------------------------------------------------------------------------- | --- |
| 변형    | 문자열                                     | 색상 구성표 변형. 옵션에는 `Dark`, `Light`, 및 `System`이 포함됩니다. | 라이트 |
| 선택됨   | 부울                                      | `true`이면 선택한 색상 구성표를 나타내는 체크 표시가 나타납니다.                             |     |
| 추가 속성 | `React.ComponentPropsWithoutRef<'div'>` | 기본 HTML `div` 요소 속성                                                                 |     |

</Tab>

</Tabs>

## 색상 구성표 선택기

사용자가 다양한 색상 구성표를 선택할 수 있도록 합니다.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| 프로퍼티     | 유형       | 설명                            |
| -------- | -------- | ----------------------------- |
| 값        | `색 구성표`  | 현재 선택된 색상 구성표                 |
| onChange | function | 사용자가 색상 구성표를 선택할 때 트리거할 콜백 함수 |

</Tab>

</Tabs>
